<template>
  <view class="nav-bar">
    <view class="top"></view>
    <view class="bottom">
      <view class="left"><slot name="left"></slot></view>
      <view class="center"><slot name="center"></slot></view>
      <view class="right"><slot name="right"></slot></view>
    </view>

  </view>
</template>

<script>
export default {
  name: 'FirstNav',
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  background: rgba($color: #000000, $alpha: 0);
  .top {
    height: 50rpx;
  }
  .bottom {
    z-index: 100;
    height: 64rpx;
    display: flex;
    width: 100vw;
    .left,
    .right {
      width: 120rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .center {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
